<template>
    <div>
        <Header></Header>

        <!--广告-->
        <div style=" width:1200px; margin:0px auto; margin-top:20px;">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item , index) in adList" :key="index">
                    <a :href="item.link">
                        <img :src="item.img" style='width: 100%;height: 100%;object-fit: cover;'/>
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!--容器-->
        <div style="width: 1200PX; min-height:500px; margin:0px auto;">

            <!--课程列表-->
            <div style="width: 850PX;display: inline-block;  ">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="选课" name="allLesson">
                        <ul class="course-ul-pc">
                            <!-- 课程信息展示开始 -->
                            <li class="course-li" v-for="(item , index) in courseList" :key="index" >
                                <!-- 课程封面图 -->
                                <div  @click="gotoDetail(item)" >
                                    <img
                                            :src="item.courseImgUrl"
                                            class="teacher-portrait hover-pointer"
                                    />
                                    <!-- 课程文字信息 -->
                                    <div class="content-main">
                                        <!-- 课程标题 -->
                                        <div class="content-title hover-pointer">
                                            <div
                                                    class="p-title"
                                                    style="text-align:left;"

                                            >
                    <span>
                      {{item.courseName}}
                    </span>
                                            </div>
                                            <!-- 作者和职称 -->
                                            <p class="p-title-buy text-overflow">
                    <span class="p-author-span">
                      {{item.teacher.teacherName}}
                    </span>
                                                <span class="p-author-line"/>
                                                <span class="p-author-span">
                      {{item.teacher.position}}
                    </span>
                                            </p>
                                            <p></p>
                                            <!-- 课程简单描述 -->
                                            <p class="p-describe" style="text-align:left;">
                                                {{item.brief}}
                                            </p>
                                        </div>
                                        <!--  &lt;!&ndash; 课程前两个章节信息 &ndash;&gt;
                                          <ul class="content-course" style="text-align:left;">
                                            &lt;!&ndash; 章节1 : 免费试看，通常是第一章的前两节课 &ndash;&gt;
                                            <li
                                              class="content-course-lesson text-overflow"
                                              style="width:300px"
                                              v-for="(lesson , index) in item.courseSections[0].courseLessons.slice(0,2)" :key="index">
                                              &lt;!&ndash; 免费试看图标 &ndash;&gt;
                                              <img
                                                src="@/assets/course-list/free-course.png"
                                                class="free-label hover-pointer"
                                              />
                                              <span class="theme-span hover-pointer">
                                                {{lesson.theme}}
                                                </span>
                                            </li>

                                          </ul>-->
                                        <!-- 价格信息 -->
                                        <div class="content-price" style="text-align:left;">
                                            <p class="content-price-p">
                                                <span class="content-price-orange-sm">￥</span>
                                                <span class="content-price-orange">{{item.discounts}}</span>
                                                <span class="current-price">
                      <span class="current-price-unite">￥</span>
                      {{item.price}}
                    </span>
                                                <span class="activity-name">成就自己</span>
                                                <span class="content-price-buy">{{item.sales}}人购买</span>
                                            </p>
                                             <div class="btn btn-green btn-offset" @click="buy(item)" v-if="myCourseIds.indexOf(item.id)===-1">立即购买</div>
                                            <div class="btn btn-yellow btn-offset" v-else>好好学习 </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!-- 课程信息结束 -->

                        </ul>

                        <!-- 微信支付二维码-->
                        <el-dialog :visible.sync="dialogFormVisible" :before-close="cancelOrder" :modal="true"
                                   :close-on-click-modal="false" style="width:800px;margin:0px auto;">
                            <h1 style="font-size:30px;color:#00B38A">微信扫一扫支付</h1>
                            <div id="qrcode" style="width:210px;margin:20px auto;"></div>
                            <h2 id="statusText"></h2>
                            <p id="closeText"></p>
                        </el-dialog>

                    </el-tab-pane>
                    <el-tab-pane label="已购" name="hasPay">
                        <div v-if="!isLogin">
                            <img src="@/assets/course-list/no-login@2x.png" class="no-data-icon"/>
                            <div class="no-data-title">您还没有登录</div>
                            <div class="no-data-title">登录后即可查看已购课程</div>
                            <div class="btn btn-yellow btn-center">立即登录</div>
                        </div>
                        <div v-if="isLogin">
                            <ul class="course-ul-pc">
                                <!-- 课程信息展示开始 -->
                                <li class="course-li" v-for="(item , index) in myCourseList" :key="index" v-if="myCourseList!=null">
                                    <div  @click="gotoDetail(item)">
                                        <!-- 课程封面图 -->
                                        <img
                                                :src="item.courseImgUrl"
                                                class="teacher-portrait hover-pointer"
                                        />
                                        <!-- 课程文字信息 -->
                                        <div class="content-main">
                                            <!-- 课程标题 -->
                                            <div class="content-title hover-pointer">
                                                <div
                                                        class="p-title"
                                                        style="text-align:left;"

                                                >
                    <span>
                      {{item.courseName}}
                    </span>
                                                </div>
                                                <!-- 作者和职称 -->
                                                <p class="p-title-buy text-overflow">
                    <span class="p-author-span">
                      {{item.teacher.teacherName}}
                    </span>
                                                    <span class="p-author-line"/>
                                                    <span class="p-author-span">
                      {{item.teacher.position}}
                    </span>
                                                </p>
                                                <p></p>
                                                <!-- 课程简单描述 -->
                                                <p class="p-describe" style="text-align:left;">
                                                    {{item.brief}}
                                                </p>
                                            </div>
                                            <!-- 课程前两个章节信息 -->
<!--                                            <ul class="content-course" style="text-align:left;">-->
<!--                                                &lt;!&ndash; 章节1 : 免费试看，通常是第一章的前两节课 &ndash;&gt;-->
<!--                                                <li-->
<!--                                                        class="content-course-lesson text-overflow"-->
<!--                                                        style="width:300px"-->
<!--                                                        v-for="(lesson , index) in item.courseSections[0].courseLessons.slice(0,2)"-->
<!--                                                        :key="index">-->
<!--                                                    &lt;!&ndash; 免费试看图标 &ndash;&gt;-->
<!--                                                    <img-->
<!--                                                            src="@/assets/course-list/free-course.png"-->
<!--                                                            class="free-label hover-pointer"-->
<!--                                                    />-->
<!--                                                    <span class="theme-span hover-pointer">-->
<!--                      {{lesson.theme}}-->
<!--                      </span>-->
<!--                                                </li>-->

<!--                                            </ul>-->
                                            <!-- 价格信息 -->
                                            <div class="content-price" style="text-align:left;">
                                                <p class="content-price-p">
                                                    <span class="content-price-orange-sm">￥</span>
                                                    <span class="content-price-orange">{{item.discounts}}</span>
                                                    <span class="current-price">
                      <span class="current-price-unite">￥</span>
                      {{item.price}}
                    </span>
                                                    <span class="activity-name">成就自己</span>
                                                    <span class="content-price-buy">{{item.sales}}人购买</span>
                                                </p>
                                                <div class="btn btn-yellow btn-offset">好好学习</div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!-- 课程信息结束 -->

                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!--微信连接-->
            <div style="width:330px; height:350px; display: inline-block; float:right; ">
                <p class="title">精选文章</p>
                <ul class="article-content"></ul>
                <p class="split-line" style="margin-bottom:20px;">
                    <span class="split-word">还可以在这里找到我们</span>
                </p>
                <ul class="social-list">
                    <li class="social-item">
                        <div id="qr-wrapper" class="qr-wrapper" style="display: none;" @mouseout="hideqr()">
                            <img src="../assets/wechat-qr.47ac3f5.png" alt="二维码" class="qr-wrapper-img">
                        </div>
                        <img @mouseover="showqr()"
                             src=""
                             alt="微信" class="social-item-img">
                        <p class="social-name">微信</p>
                    </li>
                    <li class="social-item hover-pointer" @click="gozhihu()">
                        <img src=""
                             alt="知乎" class="social-item-img">
                        <p class="social-name">知乎</p>
                    </li>
                    <li class="social-item hover-pointer" @click="gowb()">
                        <img src=""
                             alt="微博" class="social-item-img">
                        <p class="social-name">微博</p>
                    </li>
                </ul>
            </div>

        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from "./Header/Header"; //顶部登录条
    import Footer from "./Footer/index"; //顶部登录条
    import QRCode from 'qrcodejs2'; // 引入qrcodejs
    import qs from 'qs';

    export default {
        name: "Index",
        components: {
            Header,
            Footer,
            QRCode // 声明组件
        },
        data() {
            return {
                activeName: "allLesson",
                courseList: [],  // 课程集合
                myCourseList: [], // 我购买过的课程列表
                isLogin: false, //登录状态
                user: null, // 已登录的用户对象信息
                myCourseIds: [], // 登录用户购买成功的课程编号集合
                adList: [],
                dialogFormVisible: false, //默认false：隐藏，true：显示
                time: null,// 计时对象
                orderNo: "",// 订单编号
                course: null,
            };
        },
        created() {
            this.getAdList();
            this.getCourseList(); //当组件创建完毕，就调用获取所有课程的方法


            this.user = JSON.parse(localStorage.getItem("user"));
            if (this.user != null) {
                this.isLogin = true; //已登录
                this.getMyCourseIds(); // 获取已购课程id
            }
        },
        methods: {
            changeCourseTab(tabName) {
                this.classSelect = tabName;
                sessionStorage && sessionStorage.setItem("courseTab", tabName);
            },
            //去课程详情页
            gotoDetail(item) {
                this.$router.push({name: "Course", params: {course: item}});
            },
            // 获取全部课程信息
            getCourseList() {
                return this.axios
                    .get("/api/course/getAllCourse")
                    .then((result) => {
                        this.courseList = result.data;
                        console.log(this.courseList)
                    }).catch((error) => {
                        this.$message.error("获取全部课程信息失败！");
                    });
            },
            // 获取顶部轮播广告
            getAdList() {
                return this.axios
                    .get("/api/ad/getAdsBySpaceId/" + 1)
                    .then((result) => {
                        console.log(result);
                        this.adList = result.data;
                    }).catch((error) => {
                        this.$message.error("获取轮播广告失败！");
                    });
            },
            // 获取登录用户购买成功的课程信息
            getMyCourseList(){
              return this.axios
              .get("/api/course/getMyCoursesById/"+this.myCourseIds
              )
              .then((result) => {
                //console.log(result);
                this.myCourseList = result.data;
                console.log(this.myCourseList)
              }).catch( (error)=>{
                this.$message.error("获取已购买的课程信息失败！");
              } );
            },
            // 1.去订单微服务 获取登录用户已经成功购买的课程id
            getMyCourseIds(){
              return this.axios
              .get("/api/order/getOKOrderCourseIds/"+this.user.content.user.id)
              .then((result) => {
                this.myCourseIds = result.data; // 购买的全部课程id
                  console.log("===   "+this.myCourseIds+"   ============================================")
                if(this.myCourseIds.length !=0){
                  this.getMyCourseList(); // 根据课程id，查询课程详情
                }

              }).catch( (error)=>{
                this.$message.error("获取已购买的课程ID失败！");
              });
            },
            // 显示微信公众号二维码
            showqr() {
                document.getElementById("qr-wrapper").style.display = "block";
            },
            // 隐藏微信公众号二维码
            hideqr() {
                document.getElementById("qr-wrapper").style.display = "none";
            },
            // 跳转到知乎
            gozhihu() {
                window.open('https://www.zhihu.com/org/la-gou-kai-wu-xun-lian-ying');
            },
            // 跳转到微博
            gowb() {
                window.open('https://weibo.com/p/1006066707072494/home?from=page_100606&mod=TAB&is_hot=1#place');
            },
            // 购买课程
            buy(course) {
                if (this.user != null) {
                    this.course = course;
                    //alert("购买第【" + courseid + "】门课程成功，加油！");
                    this.axios
                        .get("/api/order/addorder/"+course.id+"/"+this.user.content.user.id)
                        .then((result) => {
                            this.getMyCourseList(); // 查询登录用户购买的所有课程
                            this.$message.success("购买成功！");
                        }).catch( (error)=>{
                        this.$message.error("购买失败！");
                    });
                    // 待dom更新之后再用二维码渲染其内容
                    // this.$nextTick(function () {
                    //     this.createCode(); // 直接调用会报错：TypeError: Cannot read property 'appendChild' of null
                    // });
                } else {
                    this.$message.error("购买失败，请先登录！");
                }

            },
            // 生成二维码
            createCode() {
                // 将上一次的二维码清除，防止出现多个二维码
                document.getElementById("qrcode").innerHTML = "";

                // 去获取支付连接
                this.axios
                    .get("http://localhost:8004/order/createCode", {
                        params: {
                            courseid: this.course.id,
                            coursename: this.course.courseName,
                            price: 1, //测试支付金额固定为1分钱，真实上线环境再改回此真实价钱：this.course.discounts
                        }
                    })
                    .then((result) => {
                        console.log(result);
                        // QRCode(存放二维码的dom元素id，二维码的属性参数)
                        let qrcode = new QRCode('qrcode', {
                            width: 200,
                            height: 200,
                            text: result.data.code_url  // 将返回的数据嵌入到二维码中
                        });

                        this.orderNo = result.data.orderId;

                        // 保存订单， 状态为：已创建 0
                        this.saveOrder();

                        // 检查支付状态
                        this.axios
                            .get("http://localhost:8004/order/checkOrderStatus", {
                                params: {
                                    orderId: result.data.orderId // 传递 订单编号 进行查询
                                }
                            })
                            .then((result) => {
                                console.log(result.data.trade_state);
                                if (result.data.trade_state == "SUCCESS") {
                                    document.getElementById("statusText").innerHTML = "<i style='color:#00B38A' class='el-icon-success'></i> 支付成功！";
                                    // 支付成功
                                    this.updateOrder(20);

                                    // 3秒后关闭二维码窗口
                                    let s = 3;
                                    this.closeQRForm(s);


                                }
                                /*
                                else if(result.data.trade_state=="NOTPAY"){
                                  document.getElementById("statusText").innerHTML = "<i style='color:#00B38A' class='el-icon-success'></i> 未支付！";
                                  this.updateOrder(10);
                                }
                                */
                            })
                            .catch((error) => {
                                this.$message.error("查询订单失败！");
                            });
                    })
                    .catch((error) => {
                        this.$message.error("生成二维码失败！");
                        console.log(error);
                    });
            },
            // 倒计时关闭二维码窗口
            closeQRForm(s) {
                let that = this;
                that.time = setInterval(function () {
                    document.getElementById("closeText").innerHTML = "( " + s-- + " ) 秒后关闭本窗口";
                    if (s == 0) {
                        clearInterval(that.time); // 停止计时器
                        that.dialogFormVisible = false; // 二维码窗口隐藏
                        that.isBuy = true; // 修改购买状态（已购买）

                    }
                }, 1000);

                this.$router.go(0);//刷新页面
            },
            // 保存订单
            saveOrder() {
                return this.axios
                    .get("http://localhost:8003/order/saveOrder", {
                        params: {
                            orderNo: this.orderNo,
                            user_id: this.user.content.id,
                            course_id: this.course.id,
                            activity_course_id: this.course.id,
                            source_type: 1,
                            price: 1
                        }
                    })
                    .then((result) => {
                        // console.log(result);
                        console.log("保存订单");
                    })
                    .catch((error) => {
                        this.$message.error("保存订单失败！");
                    });
            },
            // 更新订单的状态
            updateOrder(statusCode) {
                return this.axios
                    .get("http://localhost:8003/order/updateOrder", {
                        params: {
                            orderNo: this.orderNo,
                            status: statusCode,
                            user_id: this.user.content.id,
                            course_id: this.course.id,
                            course_name: this.course.name,
                            price: 1
                        }
                    })
                    .then((result) => {
                        console.log("更新订单【" + this.orderNo + "】状态：" + statusCode);
                    }).catch((error) => {
                        this.$message.error("更新订单失败！");
                    });
            },
            // 取消订单
            cancelOrder() {
                this.dialogFormVisible = false;

                return this.axios
                    .get("http://localhost:8003/order/deleteOrder", {
                        params: {
                            orderno: this.orderNo,
                        }
                    })
                    .then((result) => {
                        // console.log(result);
                        console.log("取消订单");
                    })
                    .catch((error) => {
                        this.$message.error("取消订单失败！");
                    });
            }
        },

    };
</script>

<style lang="less" scoped>
    @import "../assets/less/common.less";


    .qr-wrapper {
        position: absolute;
        width: 140px;
        height: 140px;
        display: block;
        z-index: 10;
        background: #fff;
        border: 1px solid #e3ebe9;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .08);
        border-radius: 3px;
        box-sizing: border-box;
        left: -30px;
        top: -150px;
    }

    p {
        margin-top: 0;
    }

    li {
        list-style: none;
    }

    .social-item {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 62px;
    }

    .social-item-img {
        width: 32px;
        height: 32px;
    }

    .split-word {
        display: inherit;
        color: #999;
        font-size: 14px;
        margin: 0 10px;
        position: relative;
    }

    .split-word:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 30px;
        height: 1px;
        background-color: #d8d8d8;
        margin: 10px 0 0 -44px;
    }

    .split-word:after {
        margin: 10px 0 0 13px;
        content: "";
        display: inline-block;
        position: absolute;
        width: 30px;
        height: 1px;
        background-color: #d8d8d8;
    }

    .article-content {
        font-size: 14px;
        margin-bottom: 40px;
    }

    ol, ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .title {
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
        font-weight: 500;
    }

    flex {
        display: flex;
    }

    .btn(@a, @b) {
        background-color: @a;
        color: @b;
        border: 1px solid @a;
    }

    .course-ads {
        margin-bottom: 20px;
        cursor: pointer;
        width: 100%;
        max-height: 280px;
        overflow: hidden;

        img {
            width: 100%;
            border-radius: 2px;
        }
    }

    .tab-container {
        width: 100%;
        height: 60px;
        background: #ffffff;
        border-bottom: 1px solid #ededed;
    }

    .vux-tab.course-tab {
        box-sizing: border-box;
        height: 60px;
        width: 200px;
        overflow: hidden;
        font-size: 20px;

        .vux-tab-container {
            width: 260px;
        }

        .vux-tab-item {
            cursor: pointer;
            background: none;
            line-height: 60px;
            font-size: 20px;
        }

        .vux-tab-ink-bar {
            bottom: -1px;

            .vux-tab-bar-inner {
                height: 2px;
            }
        }
    }

    .tab-container {
        width: 100%;
        height: 60px;
        background: #ffffff;
        border-bottom: 1px solid #ededed;
    }

    .course-ul {
        padding: 0 20px;
    }

    .hover-pointer {
        cursor: pointer;
    }

    .course-ul-pc .course-li {
        padding: 30px 0 40px 0;
        border-bottom: 1px solid #ededed;
        position: relative;

        &:last-child {
            border-bottom: 0;
        }
    }

    .current-price {
        font-size: 12px;
        color: #999;
        font-weight: 600;
        text-decoration: line-through;
    }

    .current-price-unite {
        font-size: 12px;
        margin-right: -4px;
    }

    .p-author-line {
        content: "";
        display: inline-block;
        width: 1px;
        height: 10px;
        position: absolute;
        background: #999;
        margin-left: 5px;
        top: 3px;
    }

    .teacher-portrait {
        width: 121px;
        height: 159px;
        border-radius: 4px;
        float: left;
    }

    .content-main {
        line-height: 1.4;
        margin-left: 141px;
        position: relative;
        height: 150px;
    }

    .content-main .p-title {
        font-size: 20px;
        color: #333;
        font-family: PingFangSC-Medium, PingFang SC;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 350px;
    }

    .course-ul-pc .content-main .p-title-buy {
        font-size: 12px;
        color: #999;
        display: inline-block;
        margin-top: 6px;
        position: relative;
        float: right;
        top: -28px;
        font-weight: 400;
    }

    p {
        margin-top: 0;
    }

    .course-ul-pc .p-author-line {
        content: "";
        display: inline-block;
        width: 1px;
        height: 10px;
        position: absolute;
        background: #999;
        margin-left: 5px;
        top: 3px;
    }

    .text-overflow {
        word-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .course-ul-pc .content-main .p-describe {
        font-size: 14px;
        margin-top: 5px;
        color: #333;
        word-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .course-ul-pc .content-main .p-author-span:not(:first-child) {
        margin-left: 18px;
    }

    .course-ul-pc .content-main .content-course {
        font-size: 14px;
        padding-top: 25px;
        color: #666;
    }

    ol,
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    * {
        -webkit-tap-highlight-color: transparent;
    }

    .course-ul-pc .content-main .content-course-lesson {
        display: inline-block;
        width: 304px;
        margin: 2px 40px 6px 0;
    }

    .course-ul-pc .content-main .content-course .free-label {
        width: 50px;
        height: 16px;
        margin: 1px 5px 0 0;
    }

    .course-ul-pc .content-main .content-course-lesson:nth-child(2n) {
        margin-right: 0;
    }

    .course-ul-pc .content-main .content-course-lesson {
        display: inline-block;
        width: 304px;
        margin: 2px 40px 6px 0;
    }

    .course-ul-pc .content-main .content-price {
        height: 28px;
        line-height: 28px;
        position: absolute;
        width: 100%;
        bottom: -4px;
    }

    .course-ul-pc .content-main .content-price-p {
        font-size: 0;
    }

    .course-ul-pc .content-main .content-price-orange-sm {
        color: #ff7452;
        font-size: 14px;
    }

    .content-course {
        font-size: 14px;
        padding-top: 25px;
        color: #666;
    }

    .content-course.free-label {
        width: 50px;
        height: 16px;
        margin: 1px 5px 0 0;
    }

    .content-course-lesson {
        display: inline-block;
        width: 304px;
        margin: 2px 40px 6px 0;
    }

    .content-course-lesson:nth-child(2n) {
        margin-right: 0;
    }

    .disabled-word {
        color: #999;
        cursor: default;
    }

    .theme-span :hover {
        color: #0abf89;
    }

    .content-price-p {
        font-size: 0;
    }

    .content-price-orange {
        color: #ff7452;
        font-size: 20px;
    }

    .content-price-buy {
        font-size: 14px;
        color: #999;
        margin-left: 20px;
        transform: translate(8px, -2px);
        display: inline-block;
    }

    .content-price-grey {
        color: #999;
        font-size: 12px;
        margin-left: 5px;
    }

    .content-price-buyed {
        color: #999;
        font-size: 14px;
    }

    .content-price {
        height: 28px;
        line-height: 28px;
        position: absolute;
        width: 100%;
        bottom: -4px;
    }

    .activity-name {
        font-size: 12px;
        line-height: 14px;
        color: rgba(255, 255, 255, 1);
        padding: 2px 4px;
        background: linear-gradient(180deg,
        rgba(255, 137, 110, 1) 0%,
        rgba(255, 123, 92, 1) 100%);
        border-radius: 2px;
        display: inline-block;
        transform: translate(6px, -3px);
    }

    .p-title {
        font-size: 20px;
        color: #333;
        font-family: PingFangSC-Medium, PingFang SC;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 350px;
    }

    .p-title-dec {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .p-title-buy {
        // .font(12px);
        font-size: 12px;
        color: #999;
        display: inline-block;
        margin-top: 6px;
        position: relative;
        // .fr;
        top: -28px;
        font-weight: normal;
    }

    .companion-reading {
        background: rgba(0, 179, 138, 0.06);
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #00b38a;
        display: inline-block;
        padding: 0 8px;
        height: 22px;
        line-height: 22px;
        margin-left: 10px;
        vertical-align: text-bottom;
        position: relative;

        .triangle {
            position: absolute;
            top: 12px;
            left: -3px;
            width: 0;
            height: 0;
            content: "";
            border: 5px solid;
            border-color: transparent transparent white white;
            transform: rotate(45deg);
            box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.08);
        }
    }

    .companion-tip {
        display: none;
        position: absolute;
        font-family: HiraginoSansGB-W3;
        font-size: 14px;
        color: #777777;
        background: #ffffff;
        border: 1px solid #e3ebe9;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
        border-radius: 3px;
        line-height: 29px;
        top: -7px;
        word-break: keep-all;
        left: 80px;
        padding: 0 10px;
        width: 200px;
        z-index: 2;
    }

    .companion-reading:hover .companion-tip {
        display: inline-block;
    }

    .companion-reading:hover .companion-tip {
        display: block;
    }

    .p-describe {
        // .font(14px);
        font-size: 14px;
        margin-top: 5px;
        color: #333;
        // .text-overflow;
    }

    .p-author + p {
        margin-top: 0;
    }

    .p-author {
        margin: 10px 0 5px 0;
        // .font(12px);
        font-size: 12px;
        color: #999;
        position: relative;

        .p-author-line {
            content: "";
            display: inline-block;
            width: 1px;
            height: 10px;
            position: absolute;
            background: #999;
            margin-left: 5px;
            top: 3px;
        }
    }

    .p-author-span:not(:first-child) {
        margin-left: 18px;
    }

    .course-ul-container {
        width: 850px;
        display: inline-block;
        float: left;
    }

    .course-ul {
        padding: 0 20px;
    }

    .course-ul-pc {
        width: 790px;
        background-color: #fff;
        padding: 0 30px;
        // .fl;
    }

    .tag-icon {
        width: 57px;
        height: 18px;
        position: absolute;
        top: 30px;
        left: 0;
    }

    .more-icon {
        width: 10px;
        height: 10px;
        vertical-align: middle;
    }

    .btn {
        width: 94px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 14px;
        box-sizing: content-box;

        &-green {
            .btn(#00b38a, #fff);

            &:hover {
                background: #00a57f;
                border-color: #00a57f;
            }
        }

        &-yellow {
            .btn(#fcd766, #fff);

            &:hover {
                background: #f0d071;
                border-color: #f0d071;
            }
        }

        &-white {
            .btn(#fff, #00b38a);
            border: 1px solid #00b38a;

            &:hover {
                color: #fff;
                border-color: #00b38a;
                background-color: #00b38a;
            }
        }

        &-offset {
            position: absolute;
            right: 0;
            top: -4px;
        }
    }

    .btn-center {
        margin: 10px auto;
    }

    .no-data-title {
        font-size: 20px;
        color: #333;
        font-weight: 500;
    }
</style>
